<!DOCTYPE html>

<html lang="en" data-content_root="../../">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Actor: Sprite and Stage &#8212; Pytch  documentation</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=03e43079" />
    <link rel="stylesheet" type="text/css" href="../../_static/classic.css?v=36340f97" />
    <link rel="stylesheet" type="text/css" href="../../_static/css/pytch-classic.css?v=0321735e" />
    
    <script src="../../_static/documentation_options.js?v=7f41d439"></script>
    <script src="../../_static/doctools.js?v=9bcbadda"></script>
    <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
    
    <link rel="icon" href="../../_static/favicon.ico"/>
    <link rel="author" title="About these documents" href="../../about.html" />
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Actor-class registration" href="actor-registration.html" />
    <link rel="prev" title="Project" href="project.html" /> 
  </head><body>
<div class="NavBar">
  <a href="../../../app/"><h1>Pytch</h1></a>
  <ul>
    <a href="https://pytch.scss.tcd.ie/"><li>About Pytch</li></a>
    <a href="../../index.html"><li>Help</li></a>
    <a href="../../../app/tutorials/"><li>Tutorials</li></a>
    <a href="../../../app/my-projects/"><li>My projects</li></a>
  </ul>
</div>
<div class="warning-work-in-progress">
  <p>These help pages are incomplete — we are working on it!</p>
</div>
  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <section id="actor-sprite-and-stage">
<h1>Actor: Sprite and Stage<a class="headerlink" href="#actor-sprite-and-stage" title="Link to this heading">¶</a></h1>
<p>Much behaviour is shared between <code class="docutils literal notranslate"><span class="pre">Sprite</span></code> and <code class="docutils literal notranslate"><span class="pre">Stage</span></code>, so there is a
base class on the Python side. This class is the <code class="docutils literal notranslate"><span class="pre">Actor</span></code> class.</p>
<p>As in Scratch, there is one ‘original’ instance of each <code class="docutils literal notranslate"><span class="pre">Actor</span></code> class.
There can be other instances of Sprite-derived classes. These are
‘clones’. The <code class="docutils literal notranslate"><span class="pre">Stage</span></code> cannot have clones.</p>
<p>When building a Pytch program, the Python runtime inside Skulpt creates
whatever classes are in the program. To be clear, the actual classes are
created, not their instances. This is just the normal way of running a
Python program in Skulpt. The last few lines of a Pytch program have to
be some boilerplate which creates a <code class="docutils literal notranslate"><span class="pre">Project</span></code>, registers with it all
user-defined <code class="docutils literal notranslate"><span class="pre">Sprite</span></code>-derived or <code class="docutils literal notranslate"><span class="pre">Stage</span></code>-derived classes, and then
makes that project the ‘live’ one. As part of registering a class with a
<code class="docutils literal notranslate"><span class="pre">Project</span></code>, the original instance of that class is created and itself
registered with the <code class="docutils literal notranslate"><span class="pre">Project</span></code>.</p>
<p>(In principal, an instance could exist at the Python level but be
unknown to Pytch. Currently new instances are meant to be created and
registered in one breath via <code class="docutils literal notranslate"><span class="pre">clone()</span></code>, but there is no fundamental
reason why these concepts couldn’t be separated.)</p>
<section id="sprite-attributes-for-display">
<h2>Sprite attributes for display<a class="headerlink" href="#sprite-attributes-for-display" title="Link to this heading">¶</a></h2>
<p>Sprites can move, change size, hide themselves, or show themselves.
Properties tracking these changes live in the base Pytch-provided
<code class="docutils literal notranslate"><span class="pre">Sprite</span></code> class, along with methods to mutate them. These methods have
Scratch-like names, such as <code class="docutils literal notranslate"><span class="pre">change_x()</span></code>.</p>
</section>
<section id="costumes-and-backdrops">
<h2>Costumes and backdrops<a class="headerlink" href="#costumes-and-backdrops" title="Link to this heading">¶</a></h2>
<p><code class="docutils literal notranslate"><span class="pre">Sprite</span></code>s and the <code class="docutils literal notranslate"><span class="pre">Stage</span></code> both have a choice of ways in which they
can be represented in the project’s rendering. For a <code class="docutils literal notranslate"><span class="pre">Sprite</span></code>, these
are ‘Costumes’, and for the <code class="docutils literal notranslate"><span class="pre">Stage</span></code>, these are ‘Backdrops’. The code
refers to them both under the name <code class="docutils literal notranslate"><span class="pre">Appearance</span></code>.</p>
<p>On the JavaScript side, each <code class="docutils literal notranslate"><span class="pre">Appearance</span></code> has a JavaScript <code class="docutils literal notranslate"><span class="pre">Image</span></code>,
and also the coordinates of the ‘origin’ of the costume. When a
<code class="docutils literal notranslate"><span class="pre">Sprite</span></code> is at a particular location on the stage, it is the ‘origin’
of its current Costume’s <code class="docutils literal notranslate"><span class="pre">Image</span></code> which is at that location.</p>
<p>A <code class="docutils literal notranslate"><span class="pre">Sprite</span></code>’s collection of Costumes, or the <code class="docutils literal notranslate"><span class="pre">Stage</span></code>’s collection
of Backdrops, is described and stored as a list. This gives the
collection of appearances a sequence, so it makes sense to talk about
switching to the ‘next costume’ or the ‘next backdrop’.</p>
<p>Within the web-app, images are loaded asynchronously (from the
browser-local DB) on class registration. For testing, a hard-coded map
provides the dimensions of an image given a URL.</p>
</section>
<section id="how-stage-differs-from-sprite">
<h2>How Stage differs from Sprite<a class="headerlink" href="#how-stage-differs-from-sprite" title="Link to this heading">¶</a></h2>
<p>The <code class="docutils literal notranslate"><span class="pre">Stage</span></code> has ‘Backdrops’ (whose size is assumed to be 480x360 and
whose ‘origin’ is the actual centre) instead of ‘Costumes’. The
<code class="docutils literal notranslate"><span class="pre">Stage</span></code> has no location or size, and is always shown.</p>
<p>The <code class="docutils literal notranslate"><span class="pre">Stage</span></code> should always appear at the ‘back’ of the rendering. Until
proper z-ordering is implemented, the web-app just ensures that the
<code class="docutils literal notranslate"><span class="pre">Stage</span></code> is rendered first.</p>
</section>
</section>


            <div class="clearer"></div>
          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="Main">
        <div class="sphinxsidebarwrapper"><ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../../webapp/user/index.html">Using the Pytch web app</a></li>
<li class="toctree-l1"><a class="reference internal" href="../user/index.html">Writing Pytch programs</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../about.html">About Pytch</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../contact.html">Contact</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="../../developer.html">Developer documentation</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../../developer/development-setup.html">Development setup</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/design-overview.html">Design overview</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="index.html">VM</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="overview.html">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="integration-with-client.html">Integration with client</a></li>
<li class="toctree-l3"><a class="reference internal" href="based-on-skulpt.html">Skulpt: Python / JavaScript bridge</a></li>
<li class="toctree-l3"><a class="reference internal" href="project.html">Project</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">Actor: Sprite and Stage</a></li>
<li class="toctree-l3"><a class="reference internal" href="actor-registration.html">Actor-class registration</a></li>
<li class="toctree-l3"><a class="reference internal" href="threading-model.html">Threading model</a></li>
<li class="toctree-l3"><a class="reference internal" href="hat-blocks.html">Hat blocks</a></li>
<li class="toctree-l3"><a class="reference internal" href="syscalls.html">Syscalls</a></li>
<li class="toctree-l3"><a class="reference internal" href="skulpt-pytch-environment.html">Skulpt API / Pytch environment</a></li>
<li class="toctree-l3"><a class="reference internal" href="testing.html">Testing</a></li>
<li class="toctree-l3"><a class="reference internal" href="ide-web-app.html">Web-app</a></li>
<li class="toctree-l3"><a class="reference internal" href="rendering.html">Rendering</a></li>
<li class="toctree-l3"><a class="reference internal" href="hit-detection.html">Collision and click detection</a></li>
<li class="toctree-l3"><a class="reference internal" href="clones.html">Clones</a></li>
<li class="toctree-l3"><a class="reference internal" href="sounds.html">Sounds</a></li>
<li class="toctree-l3"><a class="reference internal" href="tutorials.html">Tutorials</a></li>
<li class="toctree-l3"><a class="reference internal" href="docstrings.html">Docstrings</a></li>
<li class="toctree-l3"><a class="reference internal" href="attribute-watchers.html">Watching object attributes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../webapp/developer/index.html">Webapp</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../medialib/developer/index.html">Media library</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/index.html">Website</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../build-tools/index.html">Tools</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../source-build.html">Source and build information</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../releases/changelog.html">Changelog</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../legal/index.html">Legal information</a></li>
</ul>
<div class="docs-home-link"><hr>
  <ul>
    <li>
      <a href="../../index.html">Pytch help home</a>
    <li>
  </ul>
</div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  </body>
</html>